<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-sm p-6">
    <label for="Email" class="relative">
      <input
        type="email"
        id="Email"
        placeholder=""
        class="peer mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
      />

      <span
        class="absolute inset-y-0 start-3 -translate-y-5 bg-white px-0.5 text-sm font-medium text-gray-700 transition-transform peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-5"
      >
        Email
      </span>
    </label>
  </body>
</html>
